<template>
  <div id="wrap">
    <header>
      <input type="text" v-model="search" placeholder="格根据商品名称搜索">
    </header>
    <!-- 表格 -->
    <table  border="1" width="100%">
      <thead>
          <tr>
            <th>
              <label><input type="checkbox" v-model="checkedAll">全选</label>
            </th>
            <th>序号</th>
            <th>产品展示</th>
            <th>产品名称</th>
              <th>购买数量</th>
              <th class="relative">
                  产品单价
                  <div class="sort">
                    <span @click="onSort(1)" class="up" :class="{sort_active: isSortActive == 1}"></span>
                    <span @click="onSort(2)" class="down" :class="{sort_active: isSortActive == 2}"></span>
                  </div>
              </th>
              <th>产品总价</th>
              <th>操作</th>
          </tr>
      </thead>
      <tbody>
          <tr v-for="({goods_id,thumb_url,goods_name,normal_price,num},i) in shop" :key="goods_id">
              <td>
                  <input type="checkbox" v-model="shop[i].checked">
              </td>
              <td>{{ i + 1 }}</td>
              <td>
                  <img :src="thumb_url" width="20px" alt="">
              </td>
              <td>{{ goods_name }}</td>
              <td>
                  <button @click="onChangeNum('-',goods_id)">-</button>
                  {{ num }}
                  <button @click="onChangeNum('+',goods_id)">+</button>
              </td>
              <td>￥{{ normal_price }}</td>
              <td>￥{{ num * normal_price }}</td>
              <td><button @click="onDel(goods_id)">删</button></td>
          </tr>
      </tbody>
      <!-- 表尾 -->
      <tfoot>
        <tr>
          <td><button @click="onDelSwitch()">删除所选</button></td>
          <td>共{{ shop.length }}条</td>
          <td colspan="6" class="tr">总金额：￥{{ money }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script>
// 混入 把一些不太重要的非逻辑的代码抽离或者是可以被服用的逻辑进行抽离[代码减肥]
import app from './app'
export default{
  mixins:[app],
  data(){
    return{
      shop:[],
      isSortActive:1,//1表示正序，2表示倒叙
      search:''
    }
  },
  methods:{
    onSort(n){
      this.isSortActive = n;
      // 排序的逻辑
      if(n == 1){
        this.shop.sort((a,b) => {
          return a.normal_price - b.normal_price;
        })
      }
    },
    // 改变数量
    onChangeNum(type,id){
        // 数量的变化应该是请求后端接口
        let data = this.shop.find((item) => item.goods_id == id);
        if(type == '-' && data.num >= 1) {
            data.num--
        }else if(type == '+'){
            // 添加购买不能超过库存
            data.num++
        }
    },
    onDel(id){
      this.shop.splice(
        this.shop.findIndex((item) => item.goods_id == id),1
      )
    },
    onDelSwitch(){
      // filter把符合条件的数据返回出来，并且是一个新数组
      this.shop.filter(item => item.checked)                   
    }
  },
  watch:{
    // watch 每次只能对一个值进行监听
    search(val){
      this.shop = this.shop.filter((item) => {
        if(item.goods_name.includes(val)){
          return true;
        }else{
          return false
        }
      })
    }
  },
  computed:{
    // 全选状态 计算属 - 函数写法只是git监听，不能修改
    // 计算属性一次能监听多个值，只要有一个发生改变，计算属性就会触发
    // 计算属性两种写法：get 函数   set
    checkedAll:{
      get(){
        return this.shop.every(item => item.checked)
      },
      set(val){
        this.shop.forEach(item => {
          item.checked = val;
        })
      },
    },
    money(){
        // 把所有被选中的商品的总价格进行累加得到总金额
        // reduce 累加
        return this.shop.filter(item => item.checked).reduce((a,b) => {
          return a + b.num * b.normal_price
        },0)
      }
  }
}
</script>
<style lang="scss" scoped>
  .tr{
    text-align: right;
  }
  .relative{
      position: relative;
  }
  .sort{
      position: absolute;
      right: 20px;
      top: 0;
      width: 20px;
      height: 30px;
      .up,.down{
          position: absolute;
      }
  }
  .up{
      border-top: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid red;
      border-bottom: 0;
      cursor: pointer;
      &.sort_active{
          border-bottom-color: red;
      }
  }
  .down{
      border-top: 0;
      border-top: 10px solid red;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 0;
      cursor: pointer;
      bottom: 5px;
      /* $表示this == .down */
      &.sort_active{
          border-top-color: red;
      }
  } 
</style>./app.js